<template>
    <div>
        <el-row type="flex" align="middle">
            <el-col :span="11" class="alignRight">
                <span>桌号：</span>
            </el-col>
            <el-col :span="13" class="alignLeft">
                <el-input v-model="seatsId" placeholder="桌号" size="small" class="myInput"></el-input>
            </el-col>
        </el-row>
        <el-row type="flex" align="middle" style="margin-top: 20px">
            <el-col :span="11" class="alignRight">
                <span>外卖单号：</span>
            </el-col>
            <el-col :span="13" class="alignLeft">
                <el-input v-model="mainId" placeholder="外卖单号" size="small" class="myInput"></el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 50px;text-align: center">

            <el-button type="primary" class="buttonSize"
                       @click="invoTableSelect">确定
            </el-button>

        </el-row>
    </div>
</template>

<script>
    import invoiceStore from '../../store/modules/frontStore/invoiceStore'

    export default {
        name: "invoSelectTableNo",
        data() {
            return {
                seatsId: '',
                mainId: '',
            }
        },
        methods: {
            invoTableSelect() {
                let obj = {mainId: this.mainId, seatsId: this.seatsId}
                invoiceStore.dispatch('invoTableSelectSt', obj).then(res => {
                    // console.log(res);
                    if (res.Status === "success") {
                        this.$router.push('/front/invoicing/invoBuyOrder')
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    .alignLeft {
        text-align: left;
    }

    .alignRight {
        text-align: right;
    }

    .myInput {
        width: 150px;
    }

    .buttonSize {
        height: 30px;
        width: 100px;
        padding: 0;
    }
</style>